<template>
  <div :class="staffBox" @click="show">
    <!--  带三角形的左边  -->
    <div class="box-left">
      <!--   三角形   -->
      <img class="left-triangle" src="@/assets/arrow-right.png"/>
    </div>
    <div :class="boxRight">
      <div class="right-content">
        <p>> 开发人员</p>
        <p><a target="_blank" href="https://space.bilibili.com/2432720/"> > 神龙后端：寻_風</a></p>
        <p><a target="_blank" href="https://space.bilibili.com/1636636/"> > 神龙前端：FinnTenzor</a></p>
        <p><a target="_blank" href="https://space.bilibili.com/23977795/"> > UI设计：芦花鸡鸡鸡</a></p>
        <p><a target="_blank" href="https://space.bilibili.com/8221367/"> > 赶鸭子上架的前端：疯狂的小智Retro</a></p>
        <p><a target="_blank" href="https://space.bilibili.com/626224308/"> > PoweredBy：@小嫩桃开发团</a></p>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'StaffBox',
    data() {
      return {
        staffBox: 'staff-box',
        boxRight: 'box-right'
      }
    },
    methods: {
      //todo 20200830 弹出动画需要优化
      show() {
        this.staffBox = this.staffBox === 'staff-box' ? 'staff-box staff-box-show' : 'staff-box'
        this.boxRight = this.boxRight === 'box-right' ? 'box-right box-right-show' : 'box-right'
      }
    }
  }
</script>

<style>
  .staff-box {
    position: fixed;
    top: 0;
    right: -110px;
    display: flex;
    width: 310px;
    height: 155px;
    background: #ef5594;
    transition: 0.3s all;
    z-index: 999;
    border-radius: 15px 0 0 15px;
  }

  .staff-box-show {
    right: 200px;
  }

  /*.staff-box:hover .box-right{*/
  /*  display: flex;*/
  /*  flex-direction: column;*/
  /*  justify-content: center;*/
  /*}*/

  .box-left {
    width: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    cursor: pointer;
  }

  .left-triangle {
    /*width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-left: 18px solid #fff;
    border-bottom: 13px solid transparent;*/
  }

  .box-right {
    width: 100%;
    display: none;
    transition: 0.6s all;
  }

  .box-right-show {
    transition: 0.6s all;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .right-content {
    height: 145px;
    /*margin: 16px 0 16px 0;*/
    border: 3px solid #cec5c9;
    background: #333333;
    font-size: 14px;
  }

  .right-content p {
    margin: 0 0 4px 10px;
    color: #fff;
  }

  .right-content p a {
    color: #fff;
    text-decoration: none;
  }
</style>
